<template>
  <div class="hot">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="100"
      :immediate-check="false"
    >
      <div v-for="(item, index) in listData" :key="index" @click="toSocietyDetail(item.id, item.video_id)">
        <hottype1 v-if="item.set_top === 1 || item.type === 1 || item.sys_publisher === 0" :itemdata="item"></hottype1>
        <hottype3 v-else-if="(item.social_image.length > 0 && item.social_image.length < 3) || (item.social_image.length === 0 && item.cover !== '')" :itemdata="item"></hottype3>
        <hottype2 v-else-if="item.social_image.length >= 3" :itemdata="item"></hottype2>
      </div>
    </van-list>
  </div>
</template>

<script>
import hottype1 from './HotComponents/hottype1'
import hottype2 from './HotComponents/hottype2'
import hottype3 from './HotComponents/hottype3'
export default {
  components: {
    hottype1,
    hottype2,
    hottype3
  },
  data () {
    return {
      listData: [],
      loading: false,
      finished: false,
      page: 1,
      last_page: 100
    }
  },
  props: ['classId', 'index'],
  created () {
    this.finished = false
    this.loading = false
    this.page = 1
    this.getSocietyData()
  },
  methods: {
    getSocietyData () {
      if (this.index === 1) {
        this.$axios.get('/api/social/index', {
          params: {
            sys_publisher: 0
          }
        }).then(res => {
          this.listData = res.data.data
        })
      } else if (this.index >= 3) {
        this.$axios.get('/api/social/getSocialsByClassify', {
          params: {
            classify_id: this.classId
          }
        }).then(res => {
          if (res.status === 200) {
            this.listData = res.data.data
          }
        })
      }
    },
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        if (this.page >= this.last_page) {
          this.finished = true
          return
        }
        this.page++
        this.loading = true
        if (this.index === 1) {
          this.$axios.get('/api/social/index', {
            params: {
              sys_publisher: 0,
              page: this.page
            }
          }).then(res => {
            if (res.status === 200) {
              this.last_page = res.data.last_page
              this.listData = this.listData.concat(res.data.data)
              this.loading = false
              this.finished = true
            }
          })
        } else if (this.index >= 3) {
          this.$axios.get('/api/social/getSocialsByClassify', {
            params: {
              classify_id: this.classId,
              page: this.page
            }
          }).then(res => {
            if (res.status === 200) {
              this.last_page = res.data.last_page
              this.listData = this.listData.concat(res.data.data)
              this.loading = false
              this.finished = true
            }
          })
        }
      }, 1000)
    },
    toSocietyDetail (id, video) {
      if (video) {
        this.$router.push(`/societyvideo/${id}`)
      } else {
        this.$router.push(`/SocietyArticle/${id}`)
      }
    }
  }
}
</script>

<style lang="scss">
.hot{
  padding: .16rem .32rem;
}
</style>
